<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../fontawesome/css/all.min.css">
<script src="../js/videoplaza.js">        
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频网页</title>
<style>
    .video-container {
        display: flex;
        flex-wrap: wrap;
    }

    .video {
        width: calc(33.33% - 20px); /* 计算每行三个视频的宽度，减去间隔 */
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }

    .video img {
        max-width: 100%;
        border-radius: 10px;
        height: auto;
        
    }

    /* 修改链接的样式 */
    .video a {
        text-decoration: none;
        color: inherit;
    }
    .video-infoContainer{
        display: flex;
        height: 100%;
        width: 100%;
    }
    .video-nameinfo {
        bottom: 0;
        left: 0%;
        width: 80%;
        color: rgb(6, 0, 0);
    }
    .video-timeinfo {
        
        bottom: 0;
        right: 0%;
        width: 50%;
        color: rgb(6, 0, 0);
    }


</style>
</head>
<body>
    <div class="video-container">
        <div class="video">
            <a href="../videos/太阳的概况.mp4" id = "videoLink" title="太阳的概况"> <!-- 根据需要更改视频链接 -->
                <img src="../png/太阳的概况.png" alt="太阳的概况">
            </a>
                <div class="video-infoContainer">
                    <div class="video-nameinfo">
                        <h5 class="fa fa-youtube-play">  视频名称: 太阳的概况</h5>
                    </div>
                   
                    <div class="video-timeinfo">
                        <h5 class="fa fa-clock-o"> 时间: 2024/3/14</h6>
                    </div>
                </div>

        </div>
        <div class="video">
            <a href="../videos/太阳辐射的概念和波长.mp4" id = "videoLink2" title="太阳辐射的概念和波长">
                <img src="../png/太阳辐射的概念和波长.png" alt="太阳辐射的概念和波长">
            </a>
            <div class="video-infoContainer">
                <div class="video-nameinfo">
                    <h5 class="fa fa-youtube-play">  视频名称: 太阳辐射的概念和波长</h5>
                </div>
               
                <div class="video-timeinfo">
                    <h5 class="fa fa-clock-o"> 时间: 2024/3/15</h6>
                </div>
            </div>
        </div>
        <div class="video">
            <a href="../videos/太阳的结构.mp4" id = "videoLink3" title="太阳的结构">
                <img src="../png/太阳的结构.png" alt="太阳的结构">
            </a>
            <div class="video-infoContainer">
                <div class="video-nameinfo">
                    <h5 class="fa fa-youtube-play" >  视频名称: 太阳的结构</h5>
                </div>
               
                <div class="video-timeinfo">
                    <h5 class="fa fa-clock-o"> 时间: 2024/3/15</h6>
                </div>
            </div>
        </div>
        <div class="video">
            <a href="../videos/太阳活动及主要表现形式.mp4" id = "videoLink4" title="太阳活动及主要表现形式">
                <img src="../png/太阳活动及主要表现形式.png" alt="太阳活动及主要表现形式">
            </a>
            <div class="video-infoContainer">
                <div class="video-nameinfo">
                    <h5 class="fa fa-youtube-play">  视频名称: 太阳活动及主要表现形式</h5>
                </div>
               
                <div class="video-timeinfo">
                    <h5 class="fa fa-clock-o"> 时间: 2024/3/15</h6>
                </div>
            </div>
            
        </div>

        <div class="video">
            <a href="../videos/太阳活动对地球、人造天体的影响.mp4" id = "videoLink5" title="太阳活动对人造天体的影响">
                <img src="../png/太阳活动对地球、人造天体的影响.png" alt="太阳活动对地球、人造天体的影响">
            </a>
            <div class="video-infoContainer">
                <div class="video-nameinfo">
                    <h5 class="fa fa-youtube-play">  视频名称: 太阳活动对地球、人造天体的影响</h5>
                </div>
               
                <div class="video-timeinfo">
                    <h5 class="fa fa-clock-o"> 时间: 2024/3/15</h6>
                </div>
            </div>
            
        </div>

        <!-- 添加更多视频项目 -->
    </div>
</body>
</html>
